<template>
  <div class="container">
    <navbar title="我的代理" theme="light" rightItemText="申请" @rightItemClick="open('agent-apply.js')"></navbar>
    <list
        class="order-list-container"
        @scroll="onPageScroll">
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell>
        <div style="margin-top: 12;"></div>
      </cell>
      <cell v-for="agent in agentList" v-bind:key="agent.id">
        <div class="box">
          <text class="box-title agent-region">{{agent.region}}</text>
          <div class="box-panel">
            <div class="tr">
              <div class="td">
                <text class="expire-time">有效期：{{agent.expireTime.split(' ')[0]}}</text>
              </div>
            </div>
          </div>
        </div>
      </cell>
    </list>
    <page-scrolltop :shown="pageScrollTopShown" @click="gotoTop"></page-scrolltop>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/box";
  .container{
    background-color: $body-bg;
    transition: transform .3s linear
  }

  .tr {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .td {
    flex: 1;
    @include border-right(1, solid, #ddd);
    align-items: center;
    justify-content: center;
    margin: 20px 0;
  }

  .agent-region {
    color: $color-primary;
    font-size: 36px;
  }

  .expire-time {
    font-size: 30px;
    color: $color;
  }

</style>
<script>

let api = require('./include/api')
let Deferred = require('Deferred')
let navigator = require('./include/xnavigator')
require('./include/page-xdom')
module.exports = {
  mixins: [
    require('./mixin/page-refresh')
  ],
  components: {
    navbar: require('./components/navbar.vue')
  },
  data () {
    return {
      agentList: []
    }
  },
  created () {
    Deferred.when(this.loadData()).always(() => {

    })
  },
  methods: {
    loadData () {
      return api.page.myAgent.data().done(rs => {
        let data = rs.data
        this.agentList = data.agentList
      })
    },
    onXRefresh (event) {
      this.onRefresh(event, Deferred.when(this.loadData()))
    },
    onPageScroll (event) {
      this.onPageScrollForScrollTop(event)
    },
    open (url) {
      navigator.push(url)
    }
  }
}
</script>
